<script setup lang="ts">
import {getAvailableTeachers} from "@/api/home/index";
import {ref, watch} from "vue";

const errorHandler = () => true

let url = 'http://192.168.5.120:8090'


const props = defineProps({
    deliverObj: {
        type: Object,
        default: () => {
            return {
                // date: (new Date().getFullYear()+ '-' + (moon < 10 ? '0' + (moon + 1) : (moon + 1)) + '-' + new Date().getDate()),
                // startTime: '07:00',
                // endTime: '09:59'
            }
        }
    }
})
let consultArr = ref([])
let getChooseTime = ref<any>({})

watch(props,function(val){
    getChooseTime.value = val.deliverObj
    if (getChooseTime.value !== '') {
        getInfo()
    }
},{deep:true})

// 获取选择哪个老师排的班
let schedulingId = ref('')
const emit = defineEmits(["schedulingId"]);
function getInfo(){
    getAvailableTeachers(getChooseTime.value ).then((res)=>{
        consultArr.value = res.data
        if (Array.isArray(consultArr.value)) {
            consultArr.value.forEach((res, index)=>{
                if (res) {
                    res.isCheck = index === 0 ? true : false;
                    if (index === 0 ) {
                        schedulingId.value = res.schedulingId
                        // 将数据传到父组件中
                        emit("schedulingId", schedulingId)
                    }
                }
            })
        }
    })
}


function consultants (item) {
    consultArr.value.forEach(res => {
        res.isCheck = false
        schedulingId.value = item.schedulingId
        // 将数据传到父组件中
        emit("schedulingId", schedulingId)
    })
    item.isCheck = !item.isCheck
}

</script>

<template>
<!--选取咨询师-->
  <div class="box">
      <div class="titTime">
          <img src="@/assets/images/团队.png" alt="" class="titImg">
          <span>选取咨询师</span>
      </div>
      <div class="teacher" v-if="consultArr != undefined">
          <div class="information" :id="item.isCheck ? 'selected' : ''" v-for="(item) in consultArr" :key="item.id" @click="consultants(item)">
              <img src="@/assets/images/选中.png" alt="" class="chooseImg" v-if="item.isCheck">
              <el-avatar :size="70" @error="errorHandler">
                  <img
                          :src="url + item.avatar" alt=""
                  />
              </el-avatar>
              <p class="name">{{ item.teacherName }}</p>
              <div class="label">
                  <button class="labelBtn">查看</button>
              </div>
          </div>
      </div>
      <div class="noDataYet" v-else>
          <a-empty class="notDate" description="暂无可以预约咨询师"
                   image="../../src/assets/images/无数据.png"/>
      </div>
  </div>
</template>

<style scoped>
.titTime {
    .titImg {
        margin-right: 2%;
        width: 7%;
        height: 7%;
        vertical-align: bottom;
    }
}

.teacher {
    display: flex;
    overflow: auto;
    margin-top: 2%;
    .information {
        position: relative;
        flex: 0 0 auto; /* 不伸缩，保持原始大小 */
        margin-right: 15px; /* 子元素之间的间距 */
        padding: 5% 3%;
        width: 38%;
        height: 46vw;
        border-radius: 5%;
        text-align: center;
        border: 1px solid rgba(23,15,26,0.2);
        .name {
            margin: auto;
            margin-top: 10px;
            margin-bottom: 14%;
            font-size: 20px;
            font-weight: 700;
            width: 98%;
            /* 强制在同一行显示 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 添加省略号 */
            text-overflow: ellipsis;
        }
        .label {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            .labelBtn {
                width: 60%;
                height: 6vw;
                border-radius: 15px;
                font-size: 3vw;
                border: none;
            }
        }
        .chooseImg {
            position: absolute;
            width: 20%;
            right: 3%;
            top: 2%;
        }
    }
    /* 最后一个子元素不需要右边距 */
    .information:last-child {
        margin-right: 0;
    }
}
#selected {
    border: 1px solid #0076FF;
}
.noDataYet {
    width: 100%;
    height: 100%;
    background-color: #fff;
    .notDate {
        margin-top: 3%;
    }
}
</style>